<template>
	<view class='loginBox'>
		<view class='loginTop'>
			<view class='loginTitle'>
				<image src="../../static/icon/logo@2x.png"></image>
				<view>登录</view>
			</view>
			<view class='loginTips'>没有账号, 立即<text class='register' @click="register">注册</text></view>
		</view>
		<view class='loginContent'>
			<input type="number" maxlength="11" placeholder="请输入账号" v-model="phone">
			<input type="password" maxlength="20" minlength="6" placeholder="请输入密码" v-model="password">
			<view class="loginBtn" @click="login">登录</view>
			<view class="forget" @click="forget">忘记密码</view>
		</view>
		<uni-popup ref="popupMessage" type="message">
			<uni-popup-message :type="msgType" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
		import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
		import md5 from '../../api/md5.js'
	export default{
		data(){
			return{
				msgType:'info',
				message:"",
				phone:"",
				password:""
			}
		},
		components: {
			uniPopupMessage
		},
		onLoad() {
			let token =  uni.getStorageSync("token")
			
			// return false
			if(token){
				uni.switchTab({
					url:'../home/home'
				})
			}
		},
		methods:{
			login(){
				let that = this;
				if (this.phone == null || this.phone == '') {
					uni.showToast({
						title: '账号不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				else if (this.password == null || this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else{
					//实现登陆接口
					let Password = md5(this.password)
					that.$http.post('/user/login', { phone: this.phone, type: 1,password:Password }).then(res => {
						if (res.code == '0') {
							console.log(res.data)
							if (res.data != '') {
								uni.setStorageSync('token', res.data.jwtToken);
								uni.setStorageSync('rongToken', res.data.rongToken);
								uni.setStorageSync('name', res.data.name);
								uni.setStorageSync('phone', res.data.phone);
								uni.setStorageSync('headImg', res.data.headImg);
								uni.setStorageSync('userType', res.data.userType);
								uni.setStorageSync('isFirst', res.data.isFirst);
								uni.setStorageSync('freeNumber', res.data.freeNumber);
								uni.setStorageSync('balance', res.data.balance);
								uni.setStorageSync('userId', res.data.id);
								uni.showToast({
									title: '登录成功',
									duration: 1000,
									success: res => {
										uni.reLaunch({
											url: '../home/home'
										});
										
									}
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				}
			},
			register(){
					uni.navigateTo({
						url:'/pages/register/index'
					})
			},
			forget(){
					uni.navigateTo({
						url:'/pages/forget/index?type=1'
					})

			}
		}
	}
</script>

<style scoped lang="scss">
	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	  color: #999;
	  font-size: 26upx;
	}
	
	input:-moz-placeholder, textarea:-moz-placeholder {
	  color: #999;
	  font-size: 26upx;
	}
	
	input::-moz-placeholder, textarea::-moz-placeholder {
	  color: #999;
	  font-size: 26upx;
	}
	
	input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	  color: #999;
	  font-size: 26upx;
	}
	page{
		height: 100%;
	}
	.loginBox{
		padding: 0 65upx;
		height: 100vh;
		.loginTop{
			padding-top: 168upx;
			.loginTitle{
				font-size: 66upx;
				color: #22222A;
				font-weight: bold;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 38upx;
				>image{
					width: 73upx;
					height: 73upx;
					margin-right: 24upx;
				}
			}
			.loginTips{
				color: #666666;
				font-size: 26upx;
				.register{
					color: #FF7517;
				}
			}
		}
		.loginContent{
			padding-top: 127upx;
			input{
				width:600upx;
				height:88upx;
				border:1upx solid rgba(217,217,217,1);
				border-radius:8upx;
				text-indent: 35upx;
				margin-bottom: 40upx;
				color: #22222A;
				font-size: 30upx;
				&:first-child{
					margin-bottom: 40upx;
				}
			}
			.loginBtn{
				width:600upx;
				height:88upx;
				background:rgba(255,117,23,1);
				border-radius:8upx;
				color: #fff;
				font-size: 34upx;
				margin-bottom: 40upx;
				margin-top: 80upx;
				text-align: center;
				line-height: 88upx;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
			}
			.forget{
				font-size: 28upx;
				color: #999;
				text-align: center;
			}
			
		}
	}
</style>
